<template>
  <el-row
    class="element-rect"
    @dblclick.stop.native="propEdit()"
    :gutter="gutter"
    :type="type"
    :justify="justify"
    :align="align"
    :tag="tag"
  >
    <draggable
      class="list-group"
      :value="items"
      @input="
        (val) => {
          $emit('propChange', 'items', val);
        }
      "
      group="controlGroup"
    >
      <q-element :key="item.uuid" v-for="item in items" :schema="item" />
    </draggable>
  </el-row>
</template>
<script>
import { mapState } from "vuex";

export default {
  name: "QRow",
  props: {
    gutter: {
      type: Number,
      default: () => 0,
    },
    type: {
      type: String,
      default: () => "flex",
    },
    justify: {
      type: String,
      default: () => "start",
    },
    align: {
      type: String,
      default: () => "",
    },
    tag: {
      type: String,
      default: () => "div",
    },
    //特殊
    items: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    propEdit() {
      console.log(this.$attrs.uuid, "propEdit");
      this.$store.dispatch("prop/editProps", {
        uuid: this.$attrs.uuid,
      });
    },
  },
  computed: {
    ...mapState({
      editing: (state) => state.prop.editing,
    }),
  },
};
</script>
